<template>
	<view>

		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="uni-box1" v-if="current === 0" v-for="item in resultwu">
			<view>
				<navigator @click="order(item.roId)">
					<text class="content-text">{{item.address}}</text>

					<view class="img">

						<img class="location" src="/static/img/location.png">

						<text class="content-text-location-font">{{item.address}}</text>
					</view>

					<view class="img">
						<img class="time" src="/static/img/time.png">
						<text class="content-text-location-font">上门时间：{{item.getTime}}</text>
					</view>
					<view class="img">
						<text class="content-text-location-font">{{item.contactsName}}&nbsp&nbsp{{item.phone}}</text>
					</view>

					<view class="img" v-if="item.sumTime > 0">
						<text class="content-text-location-font">接单剩余时间：
							<view class="djs">
								<uni-countdown :day="item.d" :hour="item.h" :minute="item.m" :second="item.s">
								</uni-countdown>
							</view>
						</text>
					</view>
					<view class="img" v-if="item.sumTime == null">
						<text class="content-text-location-font">订单状态已超时

						</text>
					</view>

					<button class="button-yuanjiao" hover-class="bg-click">接单</button>
				</navigator>
			</view>
		</view>
		<view class="uni-box2" v-if="current === 1" v-for="item in resultyi">

			<view>
				<navigator @click="order(item.roId)">
					<text class="content-text">{{item.address}}</text>
					<view class="img">
						<img class="location" src="/static/img/location.png">
						<text class="content-text-location-font">{{item.address}}</text>
					</view>
					<view class="img">
						<img class="time" src="/static/img/time.png">
						<text class="content-text-location-font">上门时间：{{item.getTime}}</text>
					</view>
					<view class="img">
						<text class="content-text-location-font">{{item.contactsName}}&nbsp &nbsp{{item.phone}}</text>
					</view>
					<!-- <view class="img">
						<text class="content-text-location-font">上门剩余时间
							<view class="djs">
								<uni-countdown :day="item.d" :hour="item.h" :minute="item.m" :second="item.s">
								</uni-countdown>
							</view>
						</text>
					</view> -->
					<view class="img" v-if="item.sumTime > 0">
						<text class="content-text-location-font">接单剩余时间：
							<view class="djs">
								<uni-countdown :day="item.d" :hour="item.h" :minute="item.m" :second="item.s">
								</uni-countdown>
							</view>
						</text>
					</view>
					<view class="img" v-if="item.sumTime == null">
						<text class="content-text-location-font">订单状态已超时

						</text>
					</view>
					<!-- 	<button class="button-yuanjiao2" hover-class="bg-click" @click="">发送消息</button> -->
					<button class="button-yuanjiao" v-if=" item.roType === 2" hover-class="bg-click">导航</button>

				</navigator>
				<button class="button-yuanjiao" v-if=" item.roType === 3" hover-class="bg-click">结算</button>

			</view>
		</view>

		<view class="uni-box2" v-if="current === 1" v-for="item in resultcommodity">
			<view>
				<navigator @click="ordercommodity(item.coId)">
					<text class="content-text">送货订单：
						<text v-if="item.coType === 2">
							待取货
						</text>
						<text v-if="item.coType === 3">
							已取货
						</text>
					</text>
					<view class="img">
						<img class="location" src="/static/img/location.png">
						<text class="content-text-location-font">{{item.address}}</text>
					</view>

					<view class="img">
						<text class="content-text-location-font">{{item.contactsName}}&nbsp &nbsp{{item.phone}}</text>
					</view>
					<view class="img">

					</view>
					<view class="imgheight" v-for=" item in commodityorderImg">
						<img :src="item.commodityimg.pash" class="commodityimg">
					</view>
					<!-- 	<button class="button-yuanjiao2" hover-class="bg-click" @click="">发送消息</button> -->
					<button class="button-yuanjiao" v-if=" item.coType === 2" hover-class="bg-click">导航</button>

				</navigator>
				

			</view>
		</view>

		<view>
			<text class="font">没有更多内容</text>
			<!-- <button @click="aaa">2233</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sumTime: '',
				leftTime: 0,
				d: '',
				h: '',
				m: '',
				n: '',
				// date:'',
				now: '',
				star: '',
				endDate: '',
				end: '',
				// leftTime: '',
				items: ['带接单', '进行中'],
				// colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#4cd964',
				styleType: 'text',
				// a: 1,
				resultwu: [],
				resultyi: [],
				timeData: {},
				resultcommodity: [],
				commodityorderImg: [],
				DataNow: new Date(),
				nums: '',
			}
		},
		onLoad() {
			this.loadData()


		},
		// onShow() {
		// 	setInterval(() => {
		// 		console.log(1111)
		// 		this.loadData()
		// 		this.onClickItem()
		// 	}, 1000);
		// },
		methods: {
			// aaa(){
			// 	uni.navigateTo({
			// 		url:'/pages/message/conversation'
			// 	})
			// },
			
			ordercommodity(coId) {
				//console.log(coId)
				uni.navigateTo({
					url: './details/CommodityOrder ?coId=' + coId
				})
			},
			order(roId) {
				//console.log(roId)
				uni.navigateTo({
					url: './details/OrderDetails?roId=' + roId
				})
			},
			onChange(e) {
				this.timeData = e
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				uni.getStorage({
					key: 'userid',
					success: res => {
						this.userid = res.data
						console.log("zaizhe", this.userid)
					}
				})
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRecyclingorder',
					method: 'GET',
					data: {
						riderId: this.userid,
						id: 1
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						this.resultyi = res.data.data.recyclingorderVo;
						for (var i = 0; i < res.data.data.recyclingorderVo.length; i++) {
							this.getTimes = res.data.data.recyclingorderVo[i].getTime
							var date = new Date();
							var now = date.getTime(); //获得当前时间与1970年1月1日时间相差的毫秒数				
							var star = this.getTimes
							var endDate = new Date(star);
							var end = endDate.getTime(); //结束时间与1970年1月1日时间相差的毫秒数	
							//console.log(end)
							var leftTime = end - now; //计算两日期之间相差的毫秒数

							if (leftTime >= 0) {
								this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
								this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
								this.m = Math.floor(leftTime / 1000 / 60 % 60);
								this.s = Math.floor(leftTime / 1000 % 60);
								//console.log(this.d + '天' + this.h + '时' + this.m + '分' + this.s + '秒')
								res.data.data.recyclingorderVo[i].d = this.d
								res.data.data.recyclingorderVo[i].h = this.h
								res.data.data.recyclingorderVo[i].m = this.m
								res.data.data.recyclingorderVo[i].s = this.s
								res.data.data.recyclingorderVo[i].sumTime = this.d + this.h + this.m + this.s
								console.log(res.data.data.recyclingorderVo[i].sumTime)
							}
							
						}
					},
				})
				uni.request({
					url: 'http://localhost:9525/xkrider/commodityorder/getCommodityorder',
					method: 'GET',
					data: {
						riderId: this.userid,
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						this.resultcommodity = res.data.data.commodityorderVoList;
						//console.log(this.resultcommodity)
						for (var i = 0; i < res.data.data.commodityorderVoList.length; i++) {
							this.id = res.data.data.commodityorderVoList[i].commodityId
							//console.log(this.id, "kk")
							uni.request({
								url: 'http://localhost:9525/xkrider/commodityorder/getCommodityorderImg',
								method: 'GET',
								data: {
									commodityId: this.id,
								},
								dataType: 'json',
								success: (res) => {
									// var result = JSON.parse(res.data.data.message);
									this.commodityorderImg = res.data.data.commodityorderImg;
									console.log(this.commodityorderImg)
								},
							})
						}
					},
				})
			},
			loadData() {
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRecyclingorder',
					method: 'GET',
					data: {
						id: 1,
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						this.resultwu = res.data.data.recyclingorderVo;
						//console.log(this.resultwu)
						for (var i = 0; i < res.data.data.recyclingorderVo.length; i++) {
							this.getTimes = res.data.data.recyclingorderVo[i].getTime
							var date = new Date();
							this.now = date.getTime(); //获得当前时间与1970年1月1日时间相差的毫秒数				
							this.star = this.getTimes
							this.endDate = new Date(this.star);
							var end = this.endDate.getTime(); //结束时间与1970年1月1日时间相差的毫秒数	
							//console.log(end)
							this.leftTime = end - this.now; //计算两日期之间相差的毫秒数
							//console.log(this.leftTime, "看着")
							if (this.leftTime >= 0) {
								this.d = Math.floor(this.leftTime / 1000 / 60 / 60 / 24);
								this.h = Math.floor(this.leftTime / 1000 / 60 / 60 % 24);
								this.m = Math.floor(this.leftTime / 1000 / 60 % 60);
								this.s = Math.floor(this.leftTime / 1000 % 60);
								//	console.log(this.d + '天' + this.h + '时' + this.m + '分' + this.s + '秒')
								res.data.data.recyclingorderVo[i].d = this.d
								res.data.data.recyclingorderVo[i].h = this.h
								res.data.data.recyclingorderVo[i].m = this.m
								res.data.data.recyclingorderVo[i].s = this.s
								res.data.data.recyclingorderVo[i].sumTime = this.d + this.h + this.m + this.s
								console.log(res.data.data.recyclingorderVo[i].sumTime)
							}


						}
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.imgheight{
		// border: 1px solid #3F536E;
		float: left;
		margin-left: 2rpx;
	}
	.commodityimg {
		width: 100rpx;
		height: 100rpx;
	}

	.djs {
		float: right;

	}

	.times {
		@include flex;
		align-items: center;

		&__item {
			color: #fff;
			font-size: 12px;
			text-align: center;
		}
	}

	.font {
		display: flex;
		justify-content: center;
		color: #CCCCCC;
	}

	page {
		background-color: #EBFCF9;
		font-weight: bold;
	}

	.img {
		margin-top: 20rpx;
	}

	.content-text-location-font {
		margin-left: 15rpx;
		font-size: 14px;
		color: #666;
	}

	.time {
		width: 43rpx;
		height: 43rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;

	}

	.location {
		width: 45rpx;
		height: 45rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
		;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.uni-box1 {
		width: 600rpx;
		height: 330rpx;
		border-radius: 7px;
		// border: 1px solid #3F536E;
		padding: 10px;
		margin: 50rpx auto;
		box-shadow: darkgrey 3px 3px 3px 3px;
		// position: absolute;
		// left: 25rpx;
		background-color: #FFFFFF;

	}

	.uni-box2 {
		width: 600rpx;
		height: 330rpx;
		border-radius: 7px;
		// border: 1px solid #3F536E;
		padding: 10px;
		margin: 50rpx auto;
		box-shadow: darkgrey 3px 3px 3px 3px;
		// position: absolute;
		// left: 25rpx;
		background-color: #FFFFFF;

	}

	.button-yuanjiao {
		width: 150rpx;
		height: 50rpx;
		display: flex;
		// margin-top: 0rpx;
		// margin-left: 420rpx;
		line-height: 50rpx;
		justify-content: center;
		border-radius: 25px;
		// 这里可以改成渐变： 
		background: linear-gradient(to right, #2ECC71, #2ABA66);
		// background-color: #ff5500;
		font-size: 14px;
		color: #FFFFFF;
		float: right;
		// margin-bottom: 200rpx;
		// position: absolute;
		// left: 460rpx;
		// top: 270rpx;
	}

	.button-yuanjiao2 {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		// margin-top: 0rpx;
		// margin-left: 420rpx;
		line-height: 50rpx;
		justify-content: center;
		border-radius: 25px;
		border: 1px solid #2ECC71;
		// 这里可以改成渐变： 
		// background: linear-gradient(to right, #2ECC71, #2ABA66);
		// background-color: #ff5500;
		font-size: 14px;
		color: #2ECC71;
		margin-left: 245rpx;
		float: left;
		// margin-bottom: 200rpx;
		// position: absolute;
		// left: 460rpx;
		// top: 270rpx;
	}

	.bg-click {
		background-color: #a7a9ff;
	}

	.content-text {
		font-size: 14px;
		color: #666;
		margin-left: 15rpx;
	}
</style>
